const style = require('./render/style')
const Layout = require('./engine').default;

let __env = GameGlobal.wx || GameGlobal.tt || GameGlobal.swan;
let sharedCanvas  = __env.getSharedCanvas();
let sharedContext = sharedCanvas.getContext('2d');
let item = {
  nickname: "zim",
  rankScore: 1,
  avatarUrl: 'openDataContext/render/avatar.png',
  openid:''
};
let openid='';
let dataDemo =  {
  data     :[],
  selfIndex: 1,
  self     : item
}
function draw(template) {
    Layout.clear();
    Layout.init(template, style);
    Layout.layout(sharedContext);  
}
function anonymous(it) {
  var arr1 = it.data;
  var out = '<view class="container" id="main"> <view class="header"> <image class="titleBg" src="openDataContext/render/前三名后框.png"><image class="awardList" src="openDataContext/render/讲台.png"><image class="avatar2" src="'+(arr1[1].avatarUrl)+'"><image class="frame2" src="openDataContext/render/第二名皇冠.png"></image></image><image class="avatar1" src="'+(arr1[0].avatarUrl)+'"><image class="frame1" src="openDataContext/render/第一名皇冠.png"></image></image><image class="avatar3" src="'+(arr1[2].avatarUrl)+'"><image class="frame3" src="openDataContext/render/第三名皇冠.png"></image></image></image></image> </view><view class="explain"><image class="rank" src="openDataContext/render/排名.png"></image><image class="username" src="openDataContext/render/名称.png"></image><image class="score" src="openDataContext/render/分数.png"></image></view> <view class="rankList"> <scrollview class="list" scrollY="true"> ';
  if (arr1) {
      var item, index = -1,
          l1 = arr1.length - 1;
      while (index < l1) {
          item = arr1[index += 1];
          out += ' <image class="listItem" src="openDataContext/render/角色框.png"> ';
          out += ' <text class="listItemNum" value="' + (index + 1) + '"></text> <image class="listHeadImg" src="' + (item.avatarUrl) + '"><image class="frame4" src="openDataContext/render/框.png"></image></image> <text class="listItemName" value="' + (item.nickname) + '"></text> <text class="listItemScore" value="' + (item.rankScore) + '"></text></image> ';
      }
  }
  out += ' </scrollview></view><image class="listItem selfListItem" src="openDataContext/render/角色框.png"> <text class="listItemNum" value="' + (it.selfIndex) + '"></text> <image class="listHeadImg" src="' + (it.self.avatarUrl) + '"><image class="frame4" src="openDataContext/render/框.png"></image></image> <text class="listItemName" value="' + (it.self.nickname) + '"></text> <text class="listItemScore" value="' + (it.self.rankScore) + '"></text></image></view>';
  return out;
}
function updateViewPort(data) { 
    Layout.updateViewPort({
        x: data.x,
        y: data.y,
        width: data.width,
        height: data.height,
    });
}
function initData()
{
  dataDemo.data=[];
  wx.getFriendCloudStorage({
    keyList: ['s'],
    success: function (res) {
      console.log('success')
      console.log(res.data);
      res.data.forEach((e)=>{
        var cp = JSON.parse(JSON.stringify(item));
        cp.nickname=e.nickname;
        cp.avatarUrl=e.avatarUrl;
        cp.openid=e.openid;
        cp.rankScore = Number(e.KVDataList[0].value);
        dataDemo.data.push(cp);
      })
      dataDemo.data.sort((a, b) => b.rankScore - a.rankScore);
      dataDemo.data.forEach((e,i)=>{
        if(e.openid==openid)
        {
          item.nickname=e.nickname;
          item.avatarUrl=e.avatarUrl;
          item.rankScore=e.rankScore;
          dataDemo.selfIndex=i+1;
          // console.log(item);
        }
      })
      draw(anonymous(dataDemo));
    },
    fail: function (res) {
      console.log('fail')
    }
  })
}
__env.onMessage(data => {
    if ( data.type === 'engine' && data.event === 'viewport' ) {
        updateViewPort(data);
        // initData();
    }
    if(data.event === 'getRank')
    {
      openid=data.openid;
      initData();
    }
});
